<template>
  <div>
    <div>
      <van-cell title="个人笔记" size="large" is-link :to="/noteList/ + userinfo.userName">
        <!-- <van-badge :content="userinfo." /> -->
      </van-cell>
      <van-cell size="large" is-link>
        <template #title>
          <span class="custom-title">我的消息</span>
          <van-tag type="danger" plain>未读</van-tag>
        </template>
        <van-badge :content="unread" />
      </van-cell>
      <van-cell title="我的照片" size="large" is-link>
        <van-badge :content="userinfo.photosNumber" />
      </van-cell>
      <van-cell title="我的视频" size="large" is-link>
        <van-badge :content="userinfo.videoNumber" />
      </van-cell>
    </div>
    <div class="sign-out">
      <van-button type="primary" plain block @click="signOut">退出登录</van-button>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex'

export default {
  props: {
    userinfo: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  computed: {
    ...mapGetters(['unread'])
  },
  methods: {
    signOut() {
      this.clearUserinfo()
    },
    ...mapMutations(['clearUserinfo'])
  }
}
</script>

<style lang="scss" scoped>
.sign-out {
  padding: 0 6px;
  margin-top: 20px;
}
</style>
